<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级学习进度 - AI教学辅助系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/common.css" rel="stylesheet">
    <link href="css/admin.css" rel="stylesheet">
    <style>
        .stats-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }
        .stats-item {
            flex: 1;
            text-align: center;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 10px;
            min-width: 120px;
        }
        .stats-value {
            font-size: 24px;
            font-weight: 700;
            color: #2c7be5;
        }
        .stats-label {
            font-size: 14px;
            color: #666;
        }
        .progress {
            height: 20px;
        }
        .action-buttons {
            margin-bottom: 20px;
        }
        .subject-tab {
            cursor: pointer;
        }
        .chart-container {
            height: 300px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container my-4">
        <!-- 消息提示区 -->
        <div id="message-container"></div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button id="btn-back" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> 返回</button>
            <!-- 隐藏班级ID，用于JS获取 -->
            <span id="class-id" style="display: none;"></span>
        </div>
        
        <!-- 班级整体情况卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-school"></i> <span id="class-name">班级</span> - 整体学习情况</h5>
            </div>
            <div class="card-body">
                <h6>班级整体学习进度</h6>
                <div class="progress mb-4">
                    <div id="class-progress-bar" class="progress-bar bg-success" role="progressbar" style="width: 0%" 
                        aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                </div>
                
                <div class="stats-container">
                    <div class="stats-item">
                        <div class="stats-value" id="total-sessions">0</div>
                        <div class="stats-label">总练习次数</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-value" id="total-questions">0</div>
                        <div class="stats-label">总题目数</div>
                    </div>
                    <div class="stats-item">
                        <div class="stats-value" id="correct-rate">0%</div>
                        <div class="stats-label">整体正确率</div>
                    </div>
                </div>
                
                <!-- 学科进度图表 -->
                <div id="subject-chart-container" class="chart-container">
                    <h6 class="mt-4">各科目学习进度</h6>
                    <canvas id="subject-progress-chart"></canvas>
                </div>
                
                <!-- 学生进度表格 -->
                <h6 class="mt-4">班级学生学习进度排名</h6>
                <div id="no-student-data" class="alert alert-info" style="display: none;">
                    暂无学生进度数据
                </div>
                <table id="student-progress-table" class="table table-striped">
                    <thead>
                        <tr>
                            <th width="5%">排名</th>
                            <th width="15%">学号</th>
                            <th width="15%">姓名</th>
                            <th width="40%">整体进度</th>
                            <th width="15%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="student-progress-tbody">
                        <!-- 学生进度数据将通过JS动态添加 -->
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 科目学习进度卡片 -->
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="fas fa-book"></i> 科目学习进度详情</h5>
            </div>
            <div class="card-body">
                <!-- 科目选择标签 -->
                <ul class="nav nav-tabs" id="subject-tabs">
                    <!-- 科目标签将通过JS动态添加 -->
                </ul>
                
                <!-- 科目学生进度表格 -->
                <h6 class="mt-4" id="subject-student-table-title">学科学生进度排名</h6>
                <div id="no-subject-student-data" class="alert alert-info" style="display: none;">
                    暂无学生进度数据
                </div>
                <table id="subject-student-table" class="table table-striped">
                    <thead>
                        <tr>
                            <th width="5%">排名</th>
                            <th width="10%">学号</th>
                            <th width="10%">姓名</th>
                            <th width="10%">练习次数</th>
                            <th width="10%">题目数量</th>
                            <th width="10%">正确率</th>
                            <th width="30%">进度</th>
                            <th width="15%">操作</th>
                        </tr>
                    </thead>
                    <tbody id="subject-student-tbody">
                        <!-- 科目学生进度数据将通过JS动态添加 -->
                    </tbody>
                </table>
                
                <!-- 知识点掌握情况图表 -->
                <h6 class="mt-4" id="knowledge-points-chart-title">知识点掌握情况</h6>
                <div id="knowledge-points-chart-container" class="chart-container">
                    <!-- 知识点图表将通过JS动态添加 -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 自定义脚本 -->
    <script src="js/admin-class-progress.js"></script>
</body>
</html> 